<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>图标点标记</title>
    <link
      rel="stylesheet"
      href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
    />
    <style>
      html,
      body,
      #container {
        height: 100%;
        width: 100%;
      }
      .amap-icon img {
        width: 25px;
        height: 34px;
      }
      .aa {
        height: 20px;
        width: 20px;
        position: relative;
        animation: identifier 0.5s;
        animation-direction: alternate;
        animation-play-state: paused;
      }
      @keyframes identifier {
        0% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=1.4.15&key=973c31822203d5d7e813bb2903afd5fe"
    ></script>
    <script src="./position.js"></script>
    <script type="text/javascript">
      var positionList = path;
      var redMarkList = [];
      var yellowMarkList = [];
      var greenMarkList = [];
      var updateRedMarkList = [];
      console.log(positionList);
      // 创建地图实例
      var map = new AMap.Map("container", {
        viewMode: "3D",
        defaultCursor: "pointer",
        expandZoomRange: true,
        zooms: [3, 20],
        pitch: 50,
        zoom: 10,
        center: [116.4, 39.92],
      });
      function render() {
        positionList.red.forEach((val) => {
          let mark = new AMap.Marker({
            position: val.position,
            content: `<img src='./2.gif' class='aa' style='width:40px;height:40px'/>`,
            extData: {
              type: "red",
              time: val.time,
              index: val.index,
            },
          });
          redMarkList.push(mark);
        });
        positionList.yellow.forEach((val) => {
          let mark = new AMap.Marker({
            position: val.position,
            content: `<img src='./2.gif' class='aa' style='width:30px;height:30px'/>`,
            extData: {
              type: "yellow",
              time: val.time,
              index: val.index,
            },
          });
          yellowMarkList.push(mark);
        });
        positionList.green.forEach((val) => {
          let mark = new AMap.Marker({
            position: val.position,
            content: `<img src='./2.gif' class='aa' style='width:20px;height:20px'/>`,
            extData: {
              type: "green",
              time: val.time,
              index: val.index,
            },
          });
          greenMarkList.push(mark);
        });

        map.add([...redMarkList, ...yellowMarkList, ...greenMarkList]);
      }
      render();

      setTimeout(() => {
        let newRedDot = [
          {
            position: [116.40378, 39.872621],
            time: +new Date() + 5,
            type: "red",
          },
          {
            position: [116.40378, 39.842621],
            time: +new Date() + 2,
            type: "red",
          },
        ];
        let newGreenDot = [
          {
            position: [116.41234, 39.255422],
            time: +new Date() + 5,
            type: "green",
          },
          {
            position: [116.32318, 39.824221],
            time: +new Date() + 2,
            type: "green",
          },
          {
            position: [116.32428, 39.234221],
            time: +new Date() + 2,
            type: "green",
          },
        ];
        let newYellowDot = [
          {
            position: [116.442134, 39.25122],
            time: +new Date() + 5,
            type: "yellow",
          },
          {
            position: [116.34428, 39.821234],
            time: +new Date() + 2,
            type: "yellow",
          },
          {
            position: [116.32428, 39.42121],
            time: +new Date() + 2,
            type: "yellow",
          },
          {
            position: [116.31248, 39.21241],
            time: +new Date() + 2,
            type: "yellow",
          },
        ];
        let dotAll = map.getAllOverlays();

        // 1.遍历渲染的点 把各个分类的筛选成三个数组对象 对象属性为type,index,time 并且按时间值降序
        let threeDot = filterDot(dotAll);

        // 2.判断新来的点有几个 有几个 就在对应生成的数组对象中进行负数长度的截取
        let oldList = threeDot.redList.splice(-newRedDot.length);
        // 删除旧的点
        oldList.forEach((val) => {
          dotAll[val.index].setMap(null);
        });
        // 增加新的点
        newRedDot.forEach((val) => {
          new AMap.Marker({
            map: map,
            position: val.position,
            content: `<img src='./2.gif' class='aa' style='width:40px;height:40px'/>`,
            extData: {
              type: val.type,
              time: val.time,
            },
            animation: "AMAP_ANIMATION_DROP",
          });
        });
        let oldList2 = threeDot.greenList.splice(-newGreenDot.length);
        // 删除旧的点
        oldList2.forEach((val) => {
          dotAll[val.index].setMap(null);
        });
        // 增加新的点
        newGreenDot.forEach((val) => {
          new AMap.Marker({
            map: map,
            position: val.position,
            content: `<img src='./2.gif' class='aa' style='width:20px;height:20px'/>`,
            extData: {
              type: val.type,
              time: val.time,
            },
            animation: "AMAP_ANIMATION_DROP",
          });
        });
        let oldList3 = threeDot.yellowList.splice(-newYellowDot.length);
        // 删除旧的点
        oldList3.forEach((val) => {
          dotAll[val.index].setMap(null);
        });
        // 增加新的点
        newYellowDot.forEach((val) => {
          new AMap.Marker({
            map: map,
            position: val.position,
            content: `<img src='./2.gif' class='aa' style='width:30px;height:30px'/>`,
            extData: {
              type: val.type,
              time: val.time,
            },
            animation: "AMAP_ANIMATION_DROP",
          });
        });
        // 3.从所有地图点数组中通过截取下来的索引进行点的删除 然后在进行新点的渲染
        dotAll.forEach((val, index) => {});
      }, 5000);
      function filterDot(allDot) {
        console.log(allDot);
        let redList = [];
        let greenList = [];
        let yellowList = [];
        allDot.forEach((val, index) => {
          let dotObj = val["w"].extData;
          console.log(dotObj);
          switch (dotObj.type) {
            case "red":
              redList.push({
                index,
                time: dotObj.time,
              });
              break;
            case "yellow":
              yellowList.push({
                index,
                time: dotObj.time,
              });
              break;
            case "green":
              greenList.push({
                index,
                time: dotObj.time,
              });
              break;
          }
          redList = aaa(redList);
          yellowList = aaa(yellowList);
          greenList = aaa(greenList);
        });
        return {
          redList,
          yellowList,
          greenList,
        };
      }

      function aaa(list) {
        list.sort((a, b) => {
          if (a.time > b.time) {
            return -1;
          } else {
            return 1;
          }
        });
        return list;
      }
      // 以 icon URL 的形式创建一个途经点
      var viaMarker = new AMap.Marker({
        position: new AMap.LngLat(116.38, 39.92),
        content: `<img src='./2.gif' class='aa' />`,
      });
    </script>
  </body>
</html>
